<template>
    <div class="swiper-container">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
            <!-- Slides -->
            <div class="swiper-slide" v-for="item in list" :key="item.id">
                <img :src="item.pic" alt="">
                <div class="title">{{item.title}}</div>
            </div>
        </div>
        <!-- If we need pagination -->
        <div class="swiper-pagination"></div>
    </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/css/swiper.css';

export default {
    data(){
        return {

        }
    },
    props:['list'],
    
    mounted(){
        new Swiper('.swiper-container',{
            loop:true,
            autoplay:{ delay: 1000, disableOnInteraction:false },
            pagination: {
                el: '.swiper-pagination',
            }
        })
    },
    
    updated(){
        new Swiper('.swiper-container',{
            loop:true,
            autoplay:{ delay: 1000, disableOnInteraction:false },
            pagination: {
                el: '.swiper-pagination',
            }
        })
    }

}
</script>
<style scoped>
.swiper-container{
    width: 100%;
    height: 200px;
}
.swiper-container img{
    width: 100%;
}
</style>